<template>
    <view class="form-cell-item">
        <view class="label">
            <text class="label-text">时段{{ index + 1 }}:</text>
        </view>
        <view class="cell-value">
            <picker
                class="input small-input"
                mode="time"
                :value="data.TimeIntervalStart"
                start="00:00"
                end="23:59"
                @change="bindStartTimeChange">
                <view class="uni-input">{{ data.TimeIntervalStart }}</view>
            </picker>
            <text class="line">-</text>
            <picker
                class="input small-input"
                mode="time"
                :value="data.TimeIntervalEnd"
                start="00:00"
                end="23:59"
                @change="bindEndTimeChange">
                <view class="uni-input">{{ data.TimeIntervalEnd }}</view>
            </picker>
            <input
                class="input small-input"
                v-model="data.ReservationNum"
                @blur="checkFn"
                type="number"
                placeholder="上限" />
            <text class="text">人</text>

            <uni-icons class="icon" type="trash" size="46" @click="$refs.tip.open()"></uni-icons>
        </view>
        <uni-popup ref="tip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确认删除该时间段？"
                :before-close="true"
                @close="close"
                @confirm="remove"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        index: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            time: 0,
        }
    },
    mounted() {},
    onShow() {},
    methods: {
        add() {
            this.$emit("addFn", "")
        },
        remove() {
            this.close()
            this.$emit("removeFn", this.data, this.index)
        },
        close() {
            this.$refs.tip.close()
        },
        checkFn() {
            if (this.data.ReservationNum < 0) {
                this.data.ReservationNum = 0
            } else if (String(this.data.ReservationNum).trim() == "") {
                this.data.ReservationNum = 0
            }
        },
        bindStartTimeChange(e) {
            this.data.TimeIntervalStart = e.detail.value
        },
        bindEndTimeChange(e) {
            this.data.TimeIntervalEnd = e.detail.value
        },
    },
}
</script>

<style lang="scss">
.form-cell-item {
    display: flex;
    flex-direction: row;
    height: 88rpx;
    align-items: center;
    background: $color-white;
    padding: 12rpx 0;

    .cell-value {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        .line {
            margin-right: 20rpx;
        }

        .input {
            height: 80rpx;
            line-height: 80rpx;
            margin-right: 20rpx;
            border: solid 1rpx $app-color-text-main;
            padding: 0 10rpx;
            background: $color-white;
            font-size: $font-size-24;
            border-radius: 8rpx;
            justify-content: center;
            display: flex;
            text-align: center;
            font-weight: bold;
        }

        .small-input {
            width: 100rpx;
        }

        .icon {
            margin-left: 20rpx;
        }
    }
}

.label {
    margin-right: 20rpx;
    display: flex;

    .label-text {
        font-size: $font-size-24;
    }
}

.item-lable {
    height: 80rpx;
    display: flex;
    align-items: center;
    padding: 0 $app-page-padding;
}

.input::-webkit-input-placeholder {
    /* placeholder颜色  */
    // color: #aab2bd;
    /* placeholder字体大小  */
    font-size: 10px;
}
</style>
